import React, { forwardRef } from 'react';
import type { FC, PropsWithChildren, DragEvent, MouseEvent } from "react";
import { IBaseData } from '@bastet/widgets';
import "./droppable-style.less";

export interface IDroppableComponent {
  data: IBaseData;
  onDragStart?: (ev: DragEvent<Element>) => void;
  onDragOver?: (ev: DragEvent<Element>) => void;
  onDrop?: (ev: DragEvent<Element>) => void;
  onDragEnter?: (ev: DragEvent<Element>) => void;
  onDragLeave?: (ev: DragEvent<Element>) => void;
  onClick?: (ev: MouseEvent<Element>) => void;
  renderProps?: { [key: string]: any };
  className?: string;
  activated?: boolean;
  style?: object;
  draggable?: boolean;
}

/**
 * 接收拖拽目标组件
 * (event: MouseEvent<HTMLDivElement, MouseEvent>) => void
 */
export type IDroppable = PropsWithChildren<IDroppableComponent>
export const Droppable: FC<IDroppable> = forwardRef((
  {
    data,
    style,
    onDragStart,
    onDragOver,
    onDrop,
    onDragEnter,
    onDragLeave,
    activated,
    onClick,
    children,
    className = '',
  },
  ref: any
) => {
  const zIndex = 9 + (data.path ? data.path.split('-').length : 0);

  const __style = { ...style, zIndex };
  if (activated) {
    Object.assign(__style, { border: '1px solid red' });
  }
  return (
    <div
      ref={ref}
      style={__style}
      data-id={data.id}
      data-path={data.path}
      data-name={data.name}
      data-zindex={zIndex}
      className={`droppable ${ className }`}
      draggable={false}
      onDragStart={onDragStart}
      onDragOver={(ev: React.DragEvent<HTMLDivElement>) => {
        ev.preventDefault();
        ev.stopPropagation();
        onDragOver && onDragOver(ev);
      }}
      onDrop={(ev: React.DragEvent<HTMLDivElement>) => {
        ev.preventDefault();
        ev.stopPropagation();
        onDrop && onDrop(ev)
      }}
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      onClick={onClick}
    >
      { children }
    </div>
  )
})
